<template>
	<view class="content paddingtb">
		<view class="mainpadding flexleft ffffff line_bottom">
			<image class="textBg margin_right2" src="/static/goods.png" mode=""></image>
			<view class="justify_between_column" style="height: 228rpx;">
				<view class="text_j color_ling">2023痛仰巡回演唱會</view>
				<view class="text_w color_orange">$23起</view>
			</view>
		</view>
		<!-- 電影片信息 -->
		<view class="mainpadding ffffff">
			<view class="flexbetween">
				<view class="flex1 margin_right3">
					<view class="text_w color_ling">郑州奥体中心</view>
					<view class="text_b color_jiu margin_top">中原區中原中路171號万达广场5-6层</view>
				</view>
				<view class="flexleft">
					<view class="margin_right4">
						<image class="imgBox" src="/static/images/index/navigation.png" mode=""></image>
						<view class="text_pee color_san">導航</view>
					</view>
					<view>
						<image class="imgBox" src="/static/images/index/phoneShop.png" mode=""></image>
						<view class="text_pee color_san">電話</view>
					</view>
				</view>
			</view>
			<!-- 預約時間 -->
			<view class="margin_top">
				<scroll-view class="white_nowrap" scroll-x>
					<view class="flexleft">
						<view class="margin_right3" v-for="(item,index) in 8">
							<view :class="index==0?'select':'noSelect'">
								<view :class="index==0?'text_pee color_orange':'text_pee color_jiu'">明天</view>
								<view
									:class="index==0?'text_a color_orange margin_top1':'text_a color_san margin_top1'">
									7-15</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 電影票列表 -->
		<view class="paddinglr padding_top3">
			<view class="mainpadding ffffff border2 flexbetween margin_bottom3" v-for="item in 4">
				<view class="flexleft">
					<view class="margin_right3">
						<view class="text_d color_ling">10:05</view>
						<view class="text_pee color_jiu margin_top1">12:49散场</view>
					</view>
					<view>
						<view class="text_five color_ling">2D原版</view>
						<view class="text_pee color_jiu" style="margin-top: 18rpx;">10號厅</view>
					</view>
				</view>
				<view class="flexleft">
					<view class="text_w color_orange margin_right3">$23.00</view>
					<view class="btn" @click="goVocalSeat">購票</view>
				</view>
			</view>
		</view>
		<!-- 介绍、须知-->
		<view class="mainpadding ffffff">
			<u-tabs :list="tabList" @click="change"  lineWidth="30rpx" keyName="title" lineColor="rgba(255, 184, 0, 1)"
				:activeStyle="{
			  color: '#000000',
			  fontWeight: 800,
			  transform: 'scale(1.05)'}" :inactiveStyle="{
			  color: '#999999',
			     fontWeight: 800,
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></u-tabs>
			<!-- 富文本 -->
			<view class="text_five color_six margin_top">
				从2018年開始举办的idol世界巡演，横跨亚洲、欧美澳洲等近30座城市，每每预售便售罄的火爆票房，也体現了林看嘉令人惊叹的市场號召力，有歌迷曾表示: 晚了1秒钟就没票了!現實版心酸本人，而晒訂單的歌迷则表示:比抢到春运火車票还開心，激动似過年”。
				
			从2018年開始举办的idol世界巡演，横跨亚洲、欧美澳洲等近30座城市，每每预售便售罄的火爆票房，也体現了林看嘉令人惊叹的市场號召力，有歌迷曾表示: 晚了1秒钟就没票了!現實版心酸本人，而晒訂單的歌迷则表示:比抢到春运火車票还開心，激动似過年”。
			</view>
		</view>
		<!-- <view class="footer">
			<view class="footerButton">
				立即購票
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				tabList: [{
					title: "介绍"
				}, {
					title: "须知"
				}]
			}
		},
		methods: {
			goVocalSeat() { //購票
				uni.navigateTo({
					url: "./vocalSeat"
				})
			},
			change(e) {
				thia.active = e.index
			}
		}
	}
</script>

<style lang="scss" scoped>

	.textBg {
		width: 164rpx;
		height: 228rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	// 電影片信息
	.imgBox {
		width: 52rpx;
		height: 52rpx;
	}

	// 預約時間
	.noSelect {
		width: 130rpx;
		height: 106rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #E8E8E8;
	}

	.select {
		width: 130rpx;
		height: 106rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgba(255, 92, 0, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF5C00;
		color: #FF5C00 !important;
	}

	.btn {
		width: 107rpx;
		height: 57rpx;
		line-height: 57rpx;
		text-align: center;
		background: #FFB800;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	
	::v-deep.u-tabs__wrapper__nav__item {
	  flex: 1;
	  white-space: nowrap;
	}
	
	::v-deep.u-tabs {
	  padding: 0 20rpx;
	}
</style>